<template>
  <div class="app-container">
    <!-- 搜索--------------------------------- -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>{{$t('common.filterSearch')}}</span>
        <el-button
          style="float: right"
          @click="searchUserList(list.user_id)"
          type="primary"
          size="small"
        >
          {{ $t('common.search') }}
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="list" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input
              style="width: 203px"
              v-model="list.user_id"
              placeholder="用户ID"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- --------------------------------- -->
    <!-- 添加-------------------------------- -->
    <!-- <div align="right">
      <el-button type="success" @click="addUser">添加用户</el-button>
    </div> -->
    <!-- --------------------------------------列表页 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="用户ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>

      <el-table-column label="用户名">
        <template slot-scope="scope">
           <el-popover trigger="hover" placement="top">
          <p>用户头像：</p>
          <p><img
            :src="scope.row.head_picture"
            alt=""
            style="width: 50px; height: 50px;float:right"
          /></p>
           <div slot="reference" class="name-wrapper">
           <el-tag size="medium">{{ scope.row.username }}</el-tag>
           </div>
           </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="密码">
        <template slot-scope="scope">
          {{ scope.row.password }}
        </template>
      </el-table-column>

      <el-table-column label="标签">
        <template slot-scope="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            @change="changeSwitch($event, scope.row, scope.$index)"
            active-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('common.operate')"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editUser(scope.row.user_id)"
          >
            {{ $t('common.update') }}
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="delUser(scope.row.user_id)"
          >
            {{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
      <!-- ****************************我的收货地址 -->
      <el-table-column
        label="查看"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="Brand Color" @click.native="address(scope.row.user_id)"
            >收货地址</el-button
          >
          <el-dialog
            title="收货信息"
            :visible.sync="dialogaddress"
            width="50%"
            :before-close="handleClose"
          >
            <el-form :model="item" v-for="(item,index) in useraddress" :key="index">
              <el-form-item  label-width="100px">
                <el-input
                :autoSize="true"
                  style="width: 400px;"
                  v-model="'收货人:'+item.name+'\n'+'电话：'+item.phone+'\n'+'收获地址:'+item.province+'-'+item.city +'-'+item.area+'-'+item.address"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogaddress = flase">取 消</el-button>
              <el-button type="primary" @click="dialogaddress = flase"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- <el-button type="success" @click="address(scope.row.user_id)">我的收藏</el-button> -->
        </template>
      </el-table-column>
      <!-- ************************************************************ -->
      <!-- *************************** 收藏记录-->
      <el-table-column
        label="收藏记录"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="Brand Color"
            @click="collect(scope.row.user_id)"
            style="margin-left: 16px"
            >我的收藏</el-button
          >
          <el-drawer
            title="我的收藏"
            :visible.sync="drawer"
            :before-close="handleClose"
          >
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item @click.native="collectCourse(userid)">
                <template slot="title">
                  <el-tag type="" style="width: 200px">收藏课程</el-tag>
                </template>
                <template>
                  <el-form
                    :model="item"
                    v-for="(item, index) in usercollectCourse"
                    :key="index"
                  >
                    <el-form-item
                      label-width="100px"
                      label="课程ID:"
                      prop="course_id"
                    >
                      <el-input v-model="item.course_id" style="width: 400px" />
                    </el-form-item>
                    <el-form-item
                      label-width="100px"
                      label="课程名称:"
                      prop="name"
                    >
                      <el-input v-model="item.name" style="width: 400px" />
                    </el-form-item>
                  </el-form>
                </template>
              </el-collapse-item>

              <el-collapse-item @click.native="collectGood(userid)">
                <template slot="title">
                  <el-tag type="warning" style="width: 200px">收藏商品</el-tag>
                </template>

                <el-form
                  :model="item"
                  v-for="(item, index) in usercollectGood"
                  :key="index"
                >

                    <el-form-item
                      label-width="100px"
                      label="商品ID:"

                    >
                      <el-input v-model="item.goodsId" style="width: 400px" />
                    </el-form-item>
                    <el-form-item
                      label-width="100px"
                      label="商品名称:"

                    >
                      <el-input v-model="item.name" style="width: 400px" />
                    </el-form-item>

                </el-form>
              </el-collapse-item>

              <el-collapse-item @click.native="collectarticle(userid)">
                <template slot="title">
                  <el-tag type="success" style="width: 200px">收藏文章</el-tag>
                </template>
                <el-form
                  :model="item"
                  v-for="(item, index) in usercollectarticle"
                  :key="index"
                >
                  <div v-if="item">
                    <el-form-item
                      label-width="100px"
                      label="文章ID:"
                      prop="articleId"
                    >
                      <el-input v-model="item.articleId" style="width: 400px" />
                    </el-form-item>
                    <el-form-item
                      label-width="100px"
                      label="文章标题:"
                      prop="title"
                    >
                      <el-input v-model="item.title" style="width: 400px" />
                    </el-form-item>
                  </div>
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </el-drawer>
        </template>
      </el-table-column>
      <!-- ***************************************************** -->
      <!-- ****************************我的课程进度 -->
      <el-table-column
        label="查看"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="warning" @click.native="courseprogress(scope.row.user_id)"
            >课程进度</el-button
          >
          <el-dialog
            title="我的课程"
            :visible.sync="dialogcourse"
            width="50%"
            :before-close="handleClose"
          >
            <el-form :model="item" v-for="(item,index) in userCourseprogress" :key="index">
              <el-form-item label="课程id:" label-width="100px">
                <el-input
                  v-model="item.course_id" style="width: 400px"
                ></el-input>
              </el-form-item>
              <el-form-item label="已学进度:" label-width="100px">
                <p></p>
                <el-progress
                  :percentage="parseInt((item.part/item.total_part)*100)"
                  :color="customColors"
                ></el-progress>

                <!-- <el-progress
                  :percentage="percentage"
                  :color="customColorMethod"
                ></el-progress>
                <el-progress
                  :percentage="percentage"
                  :color="customColors"
                ></el-progress> -->
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogcourse = flase">取 消</el-button>
              <el-button type="primary" @click="dialogcourse = flase"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </template>
      </el-table-column>
      <!-- ************************************************************* -->
    </el-table>
    <!-- ----------------------------------分页 -->
    <div class="block" style="float: right; margin-top: 20px">
      <!-- <span class="demonstration">显示总数</span> -->
      <el-pagination
        background
        @current-change="fetchData"
        :current-page.sync="page_num"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- --------------------------------------- -->
  </div>
</template>

<script>
import controll from "@/api/usercontroll";
export default {
  //定义变量和初始值
  data() {
    return {
      list: [], //列表条件封装对象
      page_num: 1,
      page_size: 8, //每8个数据一页
      total: 1, //初始化

      dialogaddress:false,
      drawer: false,
      dialogcourse: false,
      usercollect: {},
      activeName: "",
      usercollectGood: {},
      usercollectarticle: {},
      usercollectCourse: {},
      courespro: {},
      useraddress:{},
      userCourseprogress:{},
      userid: 0,
      item: "",
      // percent: 20,
      customColor: "#409eff",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },

  //在页面渲染前执行
  //调用methods定义的方法，得到数据
  created() {
    this.token = localStorage.getItem("token");
    this.fetchData();
  },

  methods: {
    // 关闭按钮
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // -----------------------------------------
    //添加用户
    addUser() {
      this.$router.push("/UserController/adduser");
    },
    //编辑用户信息
    editUser(user_id) {
      this.$router.push("/UserController/edituser/" + user_id);
    },
    // 查看收获地址-------------------------
    address(user_id) {
      var vm =this
      this.axios({
        method: "GET",
        url: "/user/address?user_id=" + user_id,
          headers: {
              'Authorization': this.token
            }
      }).then(function (resp) {
        console.log("-------------------1232131");

        vm.useraddress = resp.data.data.consigneeList;
        console.log("21564646456", resp.data.data);

      });
      vm.dialogaddress = true;
    },
    // ------------------------------------------
    // **********************************已学课程进度*****************************//
    courseprogress(user_id) {
      console.log(user_id);
      var vm =this
      this.axios({
        method: "GET",
        url: "/course/myCourse?user_id=" + user_id,
        headers: {
          Authorization: this.token,
        },
      }).then(function (resp) {
        console.log("-------------------1232131");
        console.log('aaaaaaaaaa',resp.data.data.myCourse);
        vm.userCourseprogress = resp.data.data.myCourse;
        console.log('asdasd');
        console.log("21564646456", vm.userCourseprogress);
      });
      this.dialogcourse = true;
    },
    // 课程进度修改颜色-----------------------------------
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    // -------------------------------------------
    // 点击个人ID---------------------------
    collect(user_id) {
      console.log("---------------asda");
      console.log("qqqqqqqqqqqqq", user_id);
      this.userid = user_id;
      this.drawer = true;
    },
    // -------------------------------------
    //收藏课程-----------------------------------
    collectCourse(user_id) {
      console.log("-----------------------");
      console.log("userid", user_id);

      var vm = this;
      this.axios({
        method: "GET",
        url: "/course/collect?pageNum=1&pageSize=5&userId=" + user_id,
        headers: {
          Authorization: this.token,
        },
      }).then(function (resp) {
        console.log("----------12314121---------");
        vm.usercollectCourse = resp.data.data.collectCourses;
        console.log("21564646456", vm.usercollectCourse);
        console.log("-----------------", vm.usercollectCourse[0].course_id);
      });
      this.drawer = true;
    },
    // -------------------------------------
    //收藏商品------------------------------------
    collectGood(user_id) {
      var vm = this;
      this.axios({
        method: "GET",
        url: "/mall/collections?pageNum=1&pageSize=5&userId=" + user_id,
        headers: {
          Authorization: this.token,
        },
      }).then(function (resp) {
        console.log("----------");
        vm.usercollectGood = resp.data.data.collectGoodsList;
        console.log("21564646456", vm.usercollectGood);
        console.log("-----------------", vm.usercollectGood[2].goodsId);
      });
      //this.drawer=true
    },
    // -------------------------------------
    //收藏文章------------------------------------
    collectarticle(user_id) {
      console.log("-----------------------");
      console.log("userid", user_id);

      var vm = this;
      this.axios({
        method: "GET",
        url: "/article/collections?pageNum=1&pageSize=5&userId=" + user_id,
        headers: {
          Authorization: this.token,
        },
      }).then(function (resp) {
        console.log("----------12314121---------");
        vm.usercollectarticle = resp.data.data.collectArticles;
        console.log("21564646456", vm.usercollectarticle);
        console.log("-----------------", vm.usercollectarticle[0].articleId);
      });
      this.drawer = true;
    },
    // -------------------------------------
    // ----------------------------------------------页面渲染
    fetchData(page = 1) {
      this.page_num = page;
      var vm = this;
      this.axios({
        method: "GET",
        url:"/user/list?page_num=" +this.page_num +"&page_size=" +this.page_size +"",
        headers: {
          Authorization: this.token,
        },
      })
        //请求成功调用
        .then(function (resp) {
          vm.list = resp.data.data.userList.list;
          vm.total = resp.data.data.userList.total;
        });
    },
    // -----------------------删除用户
    delUser(user_id) {
      var vm = this;
      this.axios({
        method: "DELETE",
        url: "/user?user_id=" + user_id,
      })
        .then(function (resp) {
          if (resp.data.errorCode == 0) {
            vm.$message({
              message: "删除成功!",
              type: "success",
            });
            vm.fetchData();
          }
        })
        .catch(function (error) {
          vm.$message.error("删除失败");
        });
    },
    // ------------------------------------------
    // 查找用户------------------------------
    searchUserList(user_id) {
      var vm = this;
      this.axios({
        method: "GET",
        url: "/user?user_id=" + user_id,
      })
        .then(function (resp) {
          if (resp.data.errorCode == 0) {
            vm.$message({
              message: "查找成功!",
              type: "success",
            });
            var searchList = [];
            searchList.push(resp.data.data.user);
            vm.list = searchList;
            //vm.fetchData()// 更新商品列表
          }
        })
        .catch(function (error) {
          vm.$message.error("查找失败");
          console.log(error);
        });
    },
    // -------------------------------------------------
  //修改状态-------------------------------------------------
    changeSwitch(e, row, index) {
      console.log(e, row, index);
      let uid = row.user_id;
      let type = row.status;
      console.log('aaaaaaaaaa',uid);
      console.log('qqqqqqqqqq',type);
      controll.lockuser(uid, type)
        .then((res) => {
          console.log("zsjzsj", res);
          this.$message({
            type: "success",
            message: "状态修改成功!",

          });
          this.fetchData(uid ? this.page_num : 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // ---------------------------------------------------
  },
};
</script>
